<script setup lang="ts">
import Layout from "@/views/layout.vue";
import visitorStore from "@/stores/visitor";
import {watch} from "vue";
import {onConnected, socketHeader} from "@/apis/socketIO";
import socketStatusStore from "@/stores/SocketStatus";
const visitor = visitorStore();
const socketStore = socketStatusStore();
const chatSocketConnect = (userId: any) => {
  socketHeader('socket-user-id', userId);
  onConnected((data: any, socket: any, channel: string) => {
    socketStore.socketMap[channel] = socket;
    console.log('------connected ------', socket)
  }, '/chat');
}
if(visitor.getVisitorId()) {
  chatSocketConnect(visitor.getVisitorId())
}
watch(() => visitor.getVisitorId(), (userId) => {
  chatSocketConnect(userId);
})
</script>

<template>
  <div class="octopoda-app" id = 'app'>
    <layout></layout>
  </div>
</template>

<style lang="less">
@import "assets/common.less";
#app {
  height: 100%;
  width: 100%;
  background: @mainBlue;
  position: fixed;
  left: 0;
  top: 0;
  padding: 0;
}
</style>
